<template>
  <div>
    <div  @dblclick="revertMap"
      ref="skills"
      :class="className"
      :style="{ height: height, width: width }"
    ></div>
  </div>
</template>

<script>
var echarts = require("echarts");
var china = require("@/utils/china.js");
import {getProvinceMapInfo}  from "@/utils/map_utils.js";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/admin/components/mixins/resize";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      mapData: {} // 所获取的省份的地图矢量数据
    };
  },
  mounted() {

    this.$nextTick(() => {
      this.initChart();
      console.log(china)
    });
  },
  methods: {
    randomData() {
      return Math.round(Math.random() * 500);
    },

  
        
    

    initChart() {
      const data = [
        {
          name: "北京", // 数据项名称，在这里指地区名称

          value: [
            // 数据项值
            116.46, // 地理坐标，经度
            39.92, // 地理坐标，纬度
            340, // 北京地区的数值
          ],
        },
        { name: "海门", value: [121.15, 31.89, 90] },
        { name: "鄂尔多斯", value: [109.781327, 39.608266, 120] },
        { name: "招远", value: [120.38, 37.35, 142] },
        { name: "舟山", value: [121.207216, 29.985295, 153] },
        { name:'武汉',value:[114.305393,30.593099,100]},
        { name: "长沙", value: [113.0823, 28.23, 120] },
        { name: "衢州", value: [118.88, 28.97, 120] },
        { name: "廊坊", value: [116.7, 39.53, 120] },
      
      ];
      this.chart = echarts.init(this.$refs.skills, "macarons");
      this.setOptions(data);
            this.chart.on("click", (params) => {
        console.log(params.name);
        //请求本地地图数据
         const provinceInfo = getProvinceMapInfo(params.name)
        
         console.log(provinceInfo)
         const item=require('/public/province/'+provinceInfo.key+'.json')
         console.log(item)
          echarts.registerMap(provinceInfo.key,item)
            this.chart.setOption({
                geo: {
                    map: provinceInfo.key,
                    center: item.features[0].properties.cp,
                }
            
            })
        
        console.log('a')
      });
    },
    setOptions(data) {
        
      this.chart.setOption({
        backgroundColor: "#100C2A",
        title: {
          text: "订单分布图",
          subtext: "",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          type: "map",
          map: "china",
          width: "55%",
            center: [104.114129, 37.550339],
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true,
        //   data: data, //数据
          itemStyle: {
            normal: {
              areaColor: "#323c48",
              borderColor: "#404a59",
            },
            emphasis: {
              areaColor: "#2a333d",
            },
          },
        },

        visualMap: {
          min: 0,
          max: 100,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },

        series: [
          {
            symbolSize: function (val) {
              //设置散点大小
              return val[2] /10;
            },
            name: "销量", // series名称
            type: "effectScatter", // series图表类型
            coordinateSystem: "geo", // series坐标系类型

            data: data,
            rippleEffect: {
              //涟漪特效相关配置
              brushType: "stroke", //波纹的绘制方式，可选 'stroke' 和 'fill'
            },
          },
        //   {
        //     name: "订单",
        //     type: "scatter",
        //     coordinateSystem: "geo",
        //     symbol: "pin", //气泡
        //     symbolSize: function (val) {
        //       //设置气泡大小
        //       return val[2] /5;
        //     },
        //     label: {
        //       normal: {
        //         show: false,
        //         textStyle: {
        //           color: "#fff",
        //           fontSize: 9,
        //         },
        //       },
        //     },
        //     itemStyle: {
        //       normal: {
        //         color: "#f00", //气泡颜色
        //       },
        //     },
        //     zlevel: 6,
        //     data: data,
        //   },
        
        
        ],
        // bmap: {
        //   center: [104.114129, 37.550339],
        //   zoom: 5,
        //   roam: true,
        //   mapStyle: {
        //     styleJson: [
        //       {
        //         featureType: "water",
        //         elementType: "all",
        //         stylers: {
        //           color: "#d1d1d1",
        //         },
        //       },
        //       {
        //         featureType: "land",
        //         elementType: "all",
        //         stylers: {
        //           color: "#f3f3f3",
        //         },
        //       },
        //       {
        //         featureType: "railway",
        //         elementType: "all",
        //         stylers: {
        //           visibility: "off",
        //         },
        //       },
        //       {
        //         featureType: "highway",
        //         elementType: "all",
        //         stylers: {
        //           color: "#fdfdfd",
        //         },
        //       },
        //       {
        //         featureType: "highway",
        //         elementType: "labels",
        //         stylers: {
        //           visibility: "off",
        //         },
        //       },
        //       {
        //         featureType: "arterial",
        //         elementType: "geometry",
        //         stylers: {
        //           color: "#fefefe",
        //         },
        //       },
        //       {
        //         featureType: "arterial",
        //         elementType: "geometry.fill",
        //         stylers: {
        //           color: "#fefefe",
        //         },
        //       },
        //       {
        //         featureType: "poi",
        //         elementType: "all",
        //         stylers: {
        //           visibility: "off",
        //         },
        //       },
        //       {
        //         featureType: "green",
        //         elementType: "all",
        //         stylers: {
        //           visibility: "off",
        //         },
        //       },
        //       {
        //         featureType: "subway",
        //         elementType: "all",
        //         stylers: {
        //           visibility: "off",
        //         },
        //       },
        //       {
        //         featureType: "manmade",
        //         elementType: "all",
        //         stylers: {
        //           color: "#d1d1d1",
        //         },
        //       },
        //       {
        //         featureType: "local",
        //         elementType: "all",
        //         stylers: {
        //           color: "#d1d1d1",
        //         },
        //       },
        //       {
        //         featureType: "arterial",
        //         elementType: "labels",
        //         stylers: {
        //           visibility: "off",
        //         },
        //       },
        //       {
        //         featureType: "boundary",
        //         elementType: "all",
        //         stylers: {
        //           color: "#fefefe",
        //         },
        //       },
        //       {
        //         featureType: "building",
        //         elementType: "all",
        //         stylers: {
        //           color: "#d1d1d1",
        //         },
        //       },
        //       {
        //         featureType: "label",
        //         elementType: "labels.text.fill",
        //         stylers: {
        //           color: "#999999",
        //         },
        //       },
        //     ],
        //   },
        // },

        //左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          y: "center",
          splitList: [
            { start: 500, end: 600 },
            { start: 400, end: 500 },
            { start: 300, end: 400 },
            { start: 200, end: 300 },
            { start: 100, end: 200 },
            { start: 0, end: 100 },
          ],
          color: [
            "#5475f5",
            "#9feaa5",
            "#85daef",
            "#74e2ca",
            "#e6ac53",
            "#9fb5ea",
          ],
        },

        //配置属性
        // series: [
        //   {
        //     name: "数据",
        //     type: "map",
        //     mapType: "china",
        //     roam: true,
        //     label: {
        //       normal: {
        //         show: true, //省份名称
        //       },
        //       emphasis: {
        //         show: false,
        //       },
        //     },
        //     data: data, //数据
        //   },
        // ],
      });
    },
     revertMap () {
      const revertOption = {
        geo: {
          map: 'china'
        }
      }
      this.chart.setOption(revertOption)
    }
  },
};
</script>

<style>
div {
}
</style>
